<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="font-awesome/font-awesome-4.7.0/css/font-awesome.min.css">
	<link type="text/css" href="jQuery-Timepicker-Addon/1.6.3/css/jquery-ui-timepicker-addon.css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="jqGrid/css/ui.jqgrid.css" />
	<link rel="stylesheet" href="select2/css/select2.css" />
	<link rel="stylesheet" type="text/css"  href="themes/<%= theme %>/jquery-ui.min.css" />

	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="jqGrid/js/grid.locale-cn.js"></script>
	<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.js"></script>
	<script type="text/javascript" src="js/jquery-ui.js"></script>
	<script type="text/javascript" src="select2/js/pinyin.min.js" ></script>
	<script type="text/javascript" src="select2/js/select2.full.js" ></script>
	<script type="text/javascript" src="select2/js/zh-CN.js" ></script>
	<script type="text/javascript" src="jQuery-Timepicker-Addon/1.6.3/js/jquery-ui-timepicker-addon.js"></script>
	<script type="text/javascript" src="jQuery-Timepicker-Addon/1.6.3/js/jquery-ui-timepicker-zh-CN.js"></script>
	<script type="text/javascript" src="js/jsNodeId.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font-size: small;
		}
		html,body{
		//overflow-x:hidden;
			-ms-overflow-style: scrollbar;
			height: 100%;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
<div id="list_1" style="padding:5px;">
	<table id="list"></table>
	<div id="pager"></div>
</div>
<script type="text/javascript">
	$(function(){
		$(window).resize(function(){
			$(window).unbind("onresize");
			var winWh = pageSize();
			$("#list").jqGrid('setGridWidth', $("#list_1").width());//.jqGrid('setGridHeight', winWh.WinH-86);
			$(window).bind("onresize", this);
		});
	});
	// $.fn.select2.defaults.theme_default = "jquery-ui";
	$(document).ready(function() {
			jQuery("#list").jqGrid({
				url:'/stocksWarn/lists',
				datatype: "json",
				//dataType:'local',
				// editurl: 'clientArray',
				mtype : "GET",
				shrinkToFit:true,
				height: 'auto',
				width:"100%",
				autowidth:true,
				colModel:[
					{
						label: '品类',
						name: '_id',
						index: '_id',
						editor: "text",
						formatter: "select",
						edittype: "select",
						editable: false,
						hidden:false,
						editoptions: {
							value: getGoodsOptions(),
							dataInit: function (elem) {
								$(elem).select2({
									language: "zh-CN",
									placeholder: {
										id: '-1', // the value of the option
										text: '请选择一个选项'
									},
									allowClear: true,
								});
							}
						},
						editrules: {required: true},
						formoptions: {
							rowpos: 1, colpos: 1,
							elmprefix: '<span style="color: red;">*</span>'
						},
						stype: 'select',
						searchoptions: {
							value: {},
							dataInit: function (elem) {
								$(elem).select2({
									language: "zh-CN",
									placeholder: {
										id: '-1', // the value of the option
										text: '请选择一个选项'
									},
									allowClear: true,
									// theme: "classic",
								});
								$(elem).select2('val',-1);
							},
							sopt: ["eq", "ne"]
						}
					},
					{label:'库存',name:'num',index:'num',editor:"text", editable : false,search:false,sortable:false},
					{label:'下限',name:'warn',index:'num',editor:"text", editable : false,search:false,sortable:false},
					{label:'警报',name:'show',index:'show',editor:"text",editable : false,search:false,
						formatter: function (cellvalue, options, rowObject) {
							var warn = "";
							if(rowObject.warn >=Number(rowObject.num)){
								warn = '<span class="fa fa-bell-o"></span>';
							}
							return warn;
						}}
				],
				sortname:'_id',
				sortorder:'desc',
				viewrecords:true,
				rowNum:10,
				rowList:[10,20,30],
				pager:"#pager",
				// caption: "<%= title %>",
				multiselect: false,
				jsonReader: {
					id: "_id",
					root : "rows",
					page:"page",
					total:"total",
					records:"records",
					repeatitems: false
				}
			});
			var values = $("#list").getColProp('_id').editoptions.value;
			$("#list").jqGrid('setColProp', '_id', {searchoptions: {value: values}});

			jQuery("#list").jqGrid('navGrid','#pager', {add:false,edit:false,del:false,search:true,refresh:false},
				{}, // edit
				{},  // add
				{},  // del
				{} // search
				);
		});
	function getGoodsOptions() {
		let data = {};
		runAjax('get', '/stocksWarn/goodsLists', {}, function (err, result) {
			if (!err) {
				for (let i = 0; i < result.rows.length; i++) {
					data[result.rows[i]._id] = result.rows[i].name;
				}
			}
		});
		return data;
	}
</script>
</body>
</html>
